<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <!-- 外层容器 -->
    <div class="container">
        <h2> To-Do List</h2>
    
     <!-- 添加任务 -->
     <div class="add">
        <input type="text" placeholder="请输入内容">
        <button class="addBtn">添加</button>
     </div>
     <!-- 按钮 -->
     <div class="category">
        <button data-filter="allBtn">全部</button>
        <button data-filter="completed">已完成</button>
        <button data-filter="uncompleted">未完成</button>

     </div>
     <!-- 搜索框 -->
      <div class="search">
        <input type="text" placeholder="请输入搜索内容">
      </div>

     <!-- 列表清单 -->
     <div class="checkList">
        <ul>
            <!-- <li><div class="left">
                <input type="checkbox" name="" id="">
                <span>打羽毛球</span>
               </div>
                <div class="but">
                    <button>编辑</button>
                    <button>删除</button>
                </div>
            </li> -->
            <!-- <li><div class="left">
                <input type="checkbox" name="" id="">
                <span>上课</span>
                </div>
                <div class="but">
                    <button>编辑</button>
                    <button>删除</button>
                </div></li>
            <li><div class="left">
                <input type="checkbox" name="" id="">
                <span>跑步</span>
                </div>
                <div class="but">
                    <button>编辑</button>
                    <button>删除</button>
                </div></li> -->
        </ul>
     </div>
     <div class="footer">
       <span>全部3</span><span>已完成1</span><span>未完成2</span>
     </div>
    
<!-- 修改弹框属性 -->
     <div id="editAlertBox">
        <p>请修改代办事项:</p>
        <input type="text" id="editInput" data-id="" />
        <button id="confirmEdit">确定</button>
        <button id="cancelEdit">取消</button>
    </div>
</div>
    
    <script src="./editableAlert.js"></script>
    <script src="./app.js"></script>
</body>
</html>